<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 在浏览器端写 JS的几种方法
        1. 直接写行内：无法写复杂的逻辑（用的不多） 
        2. 写 script 标签中：页面逻辑不复杂的时候
        3. 写在单独的 js 文件中，通过标签引入(业务逻辑较为复杂的时候)
    -->
    <!-- <button onclick="alert('123');">点我弹框</button> -->
    <script>
      // console.log('123')
    </script>
    <!-- <script src="./js/04.js"></script> -->

    <!-- 测试 js -->
    <script>
      // 1.● 定义变量：对象，数组，字符串，布尔，数值，并打印
      /**
       * 1. js 中不需要额外的定义类型，没有类型的限制，对象中的属性也可与随意的更改
       * 2. 默认声明的数据的类型，并不会限制后续对他的赋值操作
       * 3. js 开发中一种较为常见的错误就是类型和预期的不一致，所以很多逻辑中需要额外的添加判断变量类型的代码，比如是否为对象，比如是否有某个属性，某个方法
       * 4. 太灵活也不好，就有了,TS,ArkTS
       * */
      const obj = {
        name: 'jack',
        friend: 'rose',
        jump() {
          console.log('吧唧')
        },
      }
      obj.info = 'you jump i jump'
      console.log(obj)

      const arr = ['1', 2, false, obj]
      console.log(arr)

      const food = '西兰花炒蛋'
      console.log(food)

      let male = false
      male = '123'
      male = ['1', '2', '3']
      male = obj
      console.log(male)

      // 2.● 定义函数：2 个数累加并返回结果
      /**
       * 1. 和 TS 和 ArkTS 相比缺少了什么：参数的类型，返回值的类型
       * 2.
       *
       * */
      function add(numA, numB) {
        // 如果 numA 和numB无法累加，会转为字符串变成字符串拼接
        if (typeof numA != 'number' || typeof numB != 'number') {
          return alert('必须传入数值')
        }
        return numA + numB
      }
      console.log(add(2, 8))
      console.log(add(false, { name: 'jack' }))

      // 在 ArkTS 中不能写如下写法（匿名函数）
      // ArkTS 中只能写 箭头函数
      const addPlus = function (numA, numB, numC) {
        return numA + numB + numC
      }

      // 3.● 循环输出内容，根据布尔值输出不同内容
      const boolArr = [true, false, false, true, true, true, false]
      for (let index = 0; index < boolArr.length; index++) {
        if (boolArr[index]) {
          console.log('布尔值为true')
        } else {
          console.log('布尔值为 false')
        }
      }
    </script>
  </body>
</html>
